<template>
	<view class="product-detail-container">
		<!-- 顶部轮播图 -->
		<swiper class="banner-swiper" indicator-dots circular autoplay>
			<swiper-item v-for="(item, index) in productImages" :key="index">
				<image :src="item" class="banner-image" mode="aspectFit"></image>
			</swiper-item>
		</swiper>
		
		<!-- 商品基本信息 -->
		<view class="product-info">
			<view class="product-name">{{ productInfo.name }}</view>
			<view class="price-section">
				<text class="original-price">¥{{ productInfo.originalPrice }}/{{ productInfo.unit }}</text>
				<text class="discount-price">¥{{ productInfo.discountPrice }}/{{ productInfo.unit }}</text>
			</view>
			<view class="sold-count">已售{{ productInfo.soldCount }}件</view>
		</view>
		
		<!-- 商品详情图片 -->
		<view class="product-detail-images">
			<image v-for="(item, index) in productDetailImages" :key="index" 
				:src="item" class="detail-image" mode="widthFix"></image>
		</view>
		
		<!-- 底部占位，防止内容被底部固定栏遮挡 -->
		<view class="bottom-placeholder" :style="{height: (120 + bottomSafeHeight) + 'rpx'}"></view>
		
		<!-- 底部固定购车栏 -->
		<view class="bottom-bar" :style="{paddingBottom: bottomSafeHeight + 'rpx'}">
			<view class="cart-icon" @click="goToCart">
				<image src="/static/tab/cart.png" mode="aspectFit"></image>
				<view class="cart-badge" v-if="cartItemCount > 0">{{ cartItemCount }}</view>
				<text class="cart-text">购物车</text>
			</view>
			
			<!-- 数量选择器 -->
			<view class="quantity-selector" v-if="showQuantitySelector">
				<text class="quantity-btn" @click="decreaseProductQuantity">-</text>
				<text class="quantity-num">{{ productQuantity }}</text>
				<text class="quantity-btn" @click="increaseProductQuantity">+</text>
			</view>
			
			<!-- 立即购买按钮 -->
			<button class="buy-btn" @click="handleBuyNow" v-else>立即购买</button>
		</view>
		
	</view>
</template>

<script>
	import { mapState, mapGetters, mapActions } from 'vuex'
	import auth from '@/utils/auth.js'
	
	export default {
		data() {
			return {
				productId: null,
				productInfo: {
					id: 201,
					name: '兴宁手打猪肉丸',
					originalPrice: 5999,
					discountPrice: 4999,
					soldCount: 128,
					unit: '斤'
				},
				productImages: [
					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fimgextra%2Fi1%2F3193299778%2FO1CN010Q2sY02M6NTafXAtO_%21%213193299778.png&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1763648681&t=d862860dcaf604f38cfd48fca49d69ed',
					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01dT8Y891rXcu6KBodN_%21%212206647575641-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1763648699&t=f026693251dba4ebd5f3cea22b02960a',
					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2F4255374024_280602345.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1763648623&t=f6be78897f2de908ae35b9e55dff74db'
				],
				productDetailImages: [
					'https://pic.vjshi.com/2025-05-15/ea8218e6dc344a159d43f1e3a453b9eb/online/puzzle.jpg?x-oss-process=style/w1440_h2880',
					'https://img01.yzcdn.cn/upload_files/2023/06/14/5e4a6c9a3489112304a35ad8d776a1c9.jpg',
					'https://img0.baidu.com/it/u=1265764154,3029771368&fm=253&app=138&f=JPEG?w=500&h=666'
				],
				bottomSafeHeight: 0,
				showQuantitySelector: false,
				productQuantity: 1
			}
		},
		computed: {
			// 映射购物车相关的状态和getters
			...mapState('cart', ['cartItems', 'totalAmount', 'totalQuantity']),
			...mapGetters('cart', ['getCartItemCount', 'isProductInCart', 'getProductQuantity']),
			
			// 获取购物车商品总数
			cartItemCount() {
				return this.getCartItemCount
			},
			
			// 检查当前商品是否在购物车中
			isInCart() {
				return this.isProductInCart(this.productInfo.id)
			},
			
			// 获取当前商品在购物车中的数量
			cartProductQuantity() {
				return this.getProductQuantity(this.productInfo.id)
			}
		},
		onLoad(options) {
			if (options.id) {
				this.productId = options.id
			}
			this.getSafeHeight()
			// 初始化购物车
			this.initCart()
		},
		methods: {
			// 映射购物车相关的actions
			...mapActions('cart', ['addToCart', 'updateQuantity', 'removeFromCart', 'initCart']),
			
			// 获取底部安全高度
			getSafeHeight() {
				// 获取系统信息
				const systemInfo = uni.getSystemInfoSync()
				// 不同机型的底部安全高度，单位转换为rpx
				if (systemInfo.model.indexOf('iPhone X') !== -1 || 
					systemInfo.model.indexOf('iPhone 11') !== -1 || 
					systemInfo.model.indexOf('iPhone 12') !== -1 || 
					systemInfo.model.indexOf('iPhone 13') !== -1 || 
					systemInfo.model.indexOf('iPhone 14') !== -1) {
					// iPhone X系列及以上的机型，34px转换为rpx
					this.bottomSafeHeight = 68 // 34px ≈ 68rpx
				} else {
					// 其他机型
					this.bottomSafeHeight = 0
				}
			},
			
			// 增加商品数量
			increaseProductQuantity() {
				this.productQuantity++
				// 添加到购物车
				this.addProductToCart()
			},
			
			// 减少商品数量
			decreaseProductQuantity() {
				if (this.productQuantity > 1) {
					this.productQuantity--
					// 更新购物车中该商品的数量
					this.updateQuantity({
						id: this.productInfo.id,
						quantity: this.productQuantity
					})
				} else {
					// 数量为0时，变回立即购买按钮
					this.productQuantity = 0
					this.showQuantitySelector = false
					// 从购物车中移除该商品
					this.removeFromCart(this.productInfo.id)
				}
			},
			
			// 添加商品到购物车
			addProductToCart() {
				// 检查登录状态
				if (!auth.checkLoginAndRedirect(auth.getCurrentPageFullPath())) {
					return
				}
				
				this.$store.dispatch('cart/addToCart', {
					id: this.productInfo.id,
					name: this.productInfo.name,
					price: (this.productInfo.discountPrice / 100).toFixed(2),
					image: this.productImages[0],
					quantity: this.productQuantity
				})
			},
			
			// 处理立即购买
			handleBuyNow() {
				// 检查登录状态
				if (!auth.checkLoginAndRedirect(auth.getCurrentPageFullPath())) {
					return
				}
				
				// 显示数量选择器
				this.showQuantitySelector = true
			},
			
			// 跳转到购物车页面
			goToCart() {
				uni.switchTab({
					url: '/pages/cart/cart'
				})
			}
		}
	}
</script>

<style>
	.product-detail-container {
		background-color: #f5f5f5;
		padding-bottom: 120rpx;
	}
	
	/* 轮播图样式 */
	.banner-swiper {
		width: 100%;
		height: 750rpx;
		background-color: #ffffff;
	}
	
	.banner-image {
		width: 100%;
		height: 100%;
	}
	
	/* 商品信息样式 */
	.product-info {
		background-color: #ffffff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}
	
	.product-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
	}
	
	.price-section {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
	
	.original-price {
		font-size: 24rpx;
		color: #999999;
		text-decoration: line-through;
		margin-right: 20rpx;
	}
	
	.discount-price {
		font-size: 36rpx;
		font-weight: bold;
		color: #e93b3d;
	}
	
	.sold-count {
		font-size: 24rpx;
		color: #999999;
	}
	
	/* 商品详情图片样式 */
	.product-detail-images {
		background-color: #ffffff;
		padding: 20rpx;
		margin-bottom: 120rpx; /* 增加底部margin，确保内容不被底部固定栏遮挡 */
	}
	
	.detail-image {
		width: 100%;
		margin-bottom: 20rpx;
		border-radius: 8rpx; /* 添加圆角 */
	}
	
	.detail-image:last-child {
		margin-bottom: 0; /* 最后一张图片不需要底部margin */
	}
	
	/* 底部固定栏样式 */
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 120rpx; /* 设置固定高度 */
		background-color: #ffffff;
		display: flex;
		align-items: center;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
		z-index: 999;
	}
	
	/* 购物车图标样式 */
	.cart-icon {
		width: 200rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
	}
	
	.cart-icon image {
		width: 50rpx;
		height: 50rpx;
		margin-bottom: 10rpx;
	}
	
	/* 购物车数字角标 */
	.cart-badge {
		position: absolute;
		top: 0;
		right: 20rpx;
		min-width: 36rpx;
		height: 36rpx;
		line-height: 36rpx;
		padding: 0 10rpx;
		background-color: #e93b3d;
		color: #ffffff;
		font-size: 22rpx;
		text-align: center;
		border-radius: 18rpx;
	}
	
	.cart-text {
		font-size: 24rpx;
		color: #333333;
	}
	
	/* 立即购买按钮 */
	.buy-btn {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #e93b3d;
		color: #ffffff;
		font-size: 32rpx;
		border-radius: 40rpx;
		text-align: center;
		border: none;
		font-weight: bold;
		box-shadow: 0 4rpx 10rpx rgba(233, 59, 61, 0.3);
		margin-left: 30rpx;
		margin-right: 30rpx;
	}
	
	/* 数量选择器样式 */
	.quantity-selector {
		display: flex;
		align-items: center;
		height: 80rpx;
		border-radius: 40rpx;
		background-color: #e93b3d;
		color: white;
		font-weight: bold;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(233, 59, 61, 0.3);
		margin-left: 30rpx;
		margin-right: 30rpx;
	}
	
	.quantity-selector .quantity-btn {
		width: 180rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 40rpx;
		font-weight: bold;
		border: none;
		color: white;
		line-height: 80rpx;
		text-align: center;
		padding: 0;
	}
	
	
	.quantity-selector .quantity-num {
		width: 130rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-weight: bold;
		background: transparent;
		border-left: 1rpx solid rgba(255, 255, 255, 0.3);
		border-right: 1rpx solid rgba(255, 255, 255, 0.3);
		line-height: 80rpx;
		text-align: center;
		color: white;
	}
</style>